import React, { Component } from 'react'
import { List, message, Avatar, Spin, Col } from 'antd'
import { UserOutlined } from '@ant-design/icons'
import { Link } from 'react-router-dom'
import TopicTag from './TopicTag'
import dayjs from 'dayjs'
require('dayjs/locale/zh-cn')
const relativeTime = require('dayjs/plugin/relativeTime')
dayjs.locale('zh-cn')
dayjs.extend(relativeTime)
export default class Topiclist extends Component {
  //首页主题内容
  render() {
    let { loading, data } = this.props
    // console.log(data)

    return (
      <div>
        <List
          className='topics_list'
          loading={loading}
          dataSource={data}
          renderItem={data => (
            <List.Item>
              <Col xs={24} md={20}>
                {/*头像跳转到user*/}
                <Link to={`/user/${data.author.loginname}`}>
                  <Avatar
                    icon={<UserOutlined />}
                    src={data.author.avatar_url}
                    size={50}
                    title={data.author.loginname}
                  />
                </Link>
                <TopicTag
                  tab={data.top ? 'top' : data.good ? 'good' : data.tab}
                />
                {/*文字内容跳转*/}
                <Link
                  style={{
                    color: 'black'
                  }}
                  to={`/topic/${data.id}`}
                >
                  {data.title}
                </Link>
              </Col>
              <Col xs={0} md={4}>
                {dayjs(data.last_reply_at).fromNow()}
              </Col>
            </List.Item>
          )}
        ></List>
      </div>
    )
  }
}
